<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>twgl/programs - Documentation</title>

    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav>
    <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Modules</li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl.html">twgl</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.addExtensionsToContext">addExtensionsToContext</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.bindFramebufferInfo">bindFramebufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.bindTransformFeedbackInfo">bindTransformFeedbackInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.bindUniformBlock">bindUniformBlock</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createBufferInfoFromArrays">createBufferInfoFromArrays</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createFramebufferInfo">createFramebufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createProgramInfo">createProgramInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createTexture">createTexture</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createTextures">createTextures</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createTransformFeedback">createTransformFeedback</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createTransformFeedbackInfo">createTransformFeedbackInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createUniformBlockInfo">createUniformBlockInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.drawBufferInfo">drawBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.drawObjectList">drawObjectList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.getContext">getContext</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.getWebGLContext">getWebGLContext</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.glEnumToString">glEnumToString</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.isWebGL1">isWebGL1</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.isWebGL2">isWebGL2</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.resizeCanvasToDisplaySize">resizeCanvasToDisplaySize</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.resizeFramebufferInfo">resizeFramebufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.resizeTexture">resizeTexture</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setAttribInfoBufferFromArray">setAttribInfoBufferFromArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setBlockUniforms">setBlockUniforms</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setBuffersAndAttributes">setBuffersAndAttributes</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setDefaults">setDefaults</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setTextureFromArray">setTextureFromArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setUniformBlock">setUniformBlock</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setUniforms">setUniforms</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#~createContext">createContext</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_attributes.html">twgl/attributes</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.createAttribsFromArrays">createAttribsFromArrays</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.createBufferFromArray">createBufferFromArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.createBufferFromTypedArray">createBufferFromTypedArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.createBufferInfoFromArrays">createBufferInfoFromArrays</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.createBuffersFromArrays">createBuffersFromArrays</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.setAttribInfoBufferFromArray">setAttribInfoBufferFromArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.setAttributePrefix">setAttributePrefix</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_draw.html">twgl/draw</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_draw.html#.drawBufferInfo">drawBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_draw.html#.drawObjectList">drawObjectList</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_framebuffers.html">twgl/framebuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_framebuffers.html#.bindFramebufferInfo">bindFramebufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_framebuffers.html#.createFramebufferInfo">createFramebufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_framebuffers.html#.resizeFramebufferInfo">resizeFramebufferInfo</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_m4.html">twgl/m4</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.axisRotate">axisRotate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.axisRotation">axisRotation</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.copy">copy</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.frustum">frustum</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.getAxis">getAxis</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.getTranslation">getTranslation</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.identity">identity</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.inverse">inverse</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.lookAt">lookAt</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.multiply">multiply</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.negate">negate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.ortho">ortho</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.perspective">perspective</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotateX">rotateX</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotateY">rotateY</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotateZ">rotateZ</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotationX">rotationX</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotationY">rotationY</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotationZ">rotationZ</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.scale">scale</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.scaling">scaling</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.setAxis">setAxis</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.setDefaultType">setDefaultType</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.setTranslation">setTranslation</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.transformDirection">transformDirection</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.transformNormal">transformNormal</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.transformPoint">transformPoint</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.translate">translate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.translation">translation</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.transpose">transpose</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_primitives.html">twgl/primitives</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.concatVertices">concatVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.create3DFBufferInfo">create3DFBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.create3DFBuffers">create3DFBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.create3DFVertices">create3DFVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createAugmentedTypedArray">createAugmentedTypedArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCrescentBufferInfo">createCrescentBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCrescentBuffers">createCrescentBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCrescentVertices">createCrescentVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCresentBufferInfo">createCresentBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCresentBuffers">createCresentBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCresentBuffers">createCresentBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCubeBufferInfo">createCubeBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCubeBuffers">createCubeBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCubeVertices">createCubeVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCylinderBufferInfo">createCylinderBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCylinderBuffers">createCylinderBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCylinderVertices">createCylinderVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createDiscBufferInfo">createDiscBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createDiscBuffers">createDiscBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createDiscVertices">createDiscVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createPlaneBufferInfo">createPlaneBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createPlaneBuffers">createPlaneBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createPlaneVertices">createPlaneVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createSphereBufferInfo">createSphereBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createSphereBuffers">createSphereBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createSphereVertices">createSphereVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTorusBufferInfo">createTorusBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTorusBuffers">createTorusBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTorusVertices">createTorusVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTruncatedConeBufferInfo">createTruncatedConeBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTruncatedConeBuffers">createTruncatedConeBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTruncatedConeVertices">createTruncatedConeVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createXYQuadBufferInfo">createXYQuadBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createXYQuadBuffers">createXYQuadBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createXYQuadVertices">createXYQuadVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.deindexVertices">deindexVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.duplicateVertices">duplicateVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.flattenNormals">flattenNormals</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.makeRandomVertexColors">makeRandomVertexColors</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.reorientDirections">reorientDirections</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.reorientNormals">reorientNormals</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.reorientPositions">reorientPositions</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.reorientVertices">reorientVertices</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_programs.html">twgl/programs</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.bindUniformBlock">bindUniformBlock</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createAttributeSetters">createAttributeSetters</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgram">createProgram</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramFromScripts">createProgramFromScripts</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramFromSources">createProgramFromSources</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramInfo">createProgramInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramInfoFromProgram">createProgramInfoFromProgram</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createUniformBlockInfo">createUniformBlockInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createUniformBlockInfoFromProgram">createUniformBlockInfoFromProgram</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createUniformBlockSpecFromProgram">createUniformBlockSpecFromProgram</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createUniformSetters">createUniformSetters</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setAttributes">setAttributes</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setBlockUniforms">setBlockUniforms</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setBuffersAndAttributes">setBuffersAndAttributes</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setUniformBlock">setUniformBlock</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setUniforms">setUniforms</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setUniformsAndBindTextures">setUniformsAndBindTextures</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#~getBindPointForSamplerType">getBindPointForSamplerType</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_textures.html">twgl/textures</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.canFilter">canFilter</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.canGenerateMipmap">canGenerateMipmap</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.createTexture">createTexture</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.createTextures">createTextures</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.getBytesPerElementForInternalFormat">getBytesPerElementForInternalFormat</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.getFormatAndTypeForInternalFormat">getFormatAndTypeForInternalFormat</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.getNumComponentsForFormat">getNumComponentsForFormat</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.loadCubemapFromUrls">loadCubemapFromUrls</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.loadSlicesFromUrls">loadSlicesFromUrls</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.loadTextureFromUrl">loadTextureFromUrl</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.resizeTexture">resizeTexture</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setDefaultTextureColor">setDefaultTextureColor</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setEmptyTexture">setEmptyTexture</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setSamplerParameters">setSamplerParameters</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setTextureFilteringForSize">setTextureFilteringForSize</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setTextureFromArray">setTextureFromArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setTextureFromElement">setTextureFromElement</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setTextureParameters">setTextureParameters</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setTextureTo1PixelColor">setTextureTo1PixelColor</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_typedArray.html">twgl/typedArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_typedArray.html#.getGLTypeForTypedArray">getGLTypeForTypedArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_typedArray.html#.getGLTypeForTypedArrayType">getGLTypeForTypedArrayType</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_typedArray.html#.getTypedArrayTypeForGLType">getTypedArrayTypeForGLType</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_v3.html">twgl/v3</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.add">add</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.copy">copy</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.create">create</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.cross">cross</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.distance">distance</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.distanceSq">distanceSq</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.divide">divide</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.divScalar">divScalar</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.dot">dot</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.length">length</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.lengthSq">lengthSq</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.lerp">lerp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.lerpV">lerpV</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.max">max</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.min">min</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.mulScalar">mulScalar</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.multiply">multiply</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.negate">negate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.normalize">normalize</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.setDefaultType">setDefaultType</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.subtract">subtract</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_vertexArrays.html">twgl/vertexArrays</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_vertexArrays.html#.createVAOAndSetAttributes">createVAOAndSetAttributes</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_vertexArrays.html#.createVAOFromBufferInfo">createVAOFromBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_vertexArrays.html#.createVertexArrayInfo">createVertexArrayInfo</a></span></li>
</nav>

<div id="main">
    
    <h1 class="page-title">twgl/programs</h1>
    

    




<section>

<header>
    
        
            
        
    
</header>

<article>
    <div class="container-overview">
    
        
            <div class="description"><p>Low level shader program related functions</p>
<p>You should generally not need to use these functions. They are provided<br>
for those cases where you're doing something out of the ordinary<br>
and you need lower level access.</p>
<p>For backward compatibility they are available at both <code>twgl.programs</code> and <code>twgl</code><br>
itself</p>
<p>See <a href="module-twgl.html"><code>module:twgl</code></a> for core functions</p></div>
        

        
            
<div class="section-method">







<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>























</div>
        
    
    </div>

    

    

    

     

    

    

    
        <h3 class="subsection-title">Methods</h3>

        
            
<div class="section-method">

    

    <h4 class="name" id=".bindUniformBlock"><span class="type-signature">(static) </span>bindUniformBlock<span class="signature">(gl, programInfo, uniformBlockInfo)</span><span class="type-signature"> &rarr; {bool}</span></h4>

    



<div class="description">
    <p>Binds a uniform block to the matching uniform block point.<br>
Matches by blocks by name so blocks must have the same name not just the same<br>
structure.</p>
<p>If you have changed any values and you upload the values into the corresponding WebGLBuffer<br>
call <a href="module-twgl.html#.setUniformBlock"><code>module:twgl.setUniformBlock</code></a> instead.</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGL2RenderingContext</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>A WebGL 2 rendering context.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>programInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.UniformBlockSpec">module:twgl.UniformBlockSpec</a></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>a <code>ProgramInfo</code><br>
as returned from <a href="module-twgl.html#.createProgramInfo"><code>module:twgl.createProgramInfo</code></a> or or <code>UniformBlockSpec</code> as<br>
returned from <code>module:twgl.createUniformBlockSpecFromProgram</code>.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>uniformBlockInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>a <code>UniformBlockInfo</code> as returned from<br>
<a href="module-twgl.html#.createUniformBlockInfo"><code>module:twgl.createUniformBlockInfo</code></a>.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>














<div class="section-returns">
<h5>Returns:</h5>

        

<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>bool</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>true if buffer was bound. If the programInfo has no block with the same block name<br>
no buffer is bound.</p>
</div>

    
</div>



</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".createAttributeSetters"><span class="type-signature">(static) </span>createAttributeSetters<span class="signature">(gl, program)</span><span class="type-signature"> &rarr; {Object.&lt;string, function()>}</span></h4>

    



<div class="description">
    <p>Creates setter functions for all attributes of a shader<br>
program. You can pass this to <a href="module-twgl.html#.setBuffersAndAttributes"><code>module:twgl.setBuffersAndAttributes</code></a> to set all your buffers and attributes.</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><code>module:twgl.setAttributes</code> for example</li>
        </ul>
    </dd>
    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>The WebGLRenderingContext to use.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>program</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLProgram</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>the program to create setters for.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>














<div class="section-returns">
<h5>Returns:</h5>

        

<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, function()></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>an object with a setter for each attribute by name.</p>
</div>

    
</div>



</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".createProgram"><span class="type-signature">(static) </span>createProgram<span class="signature">(gl, shaders, opt_attribs<span class="signature-attributes">opt</span>, opt_errorCallback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; (nullable) {WebGLProgram}</span></h4>

    



<div class="description">
    <p>Creates a program, attaches (and/or compiles) shaders, binds attrib locations, links the<br>
program and calls useProgram.</p>
<p>NOTE: There are 4 signatures for this function</p>
<pre><code>twgl.createProgram(gl, [vs, fs], options);
twgl.createProgram(gl, [vs, fs], opt_errFunc);
twgl.createProgram(gl, [vs, fs], opt_attribs, opt_errFunc);
twgl.createProgram(gl, [vs, fs], opt_attribs, opt_locations, opt_errFunc);</code></pre>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            
            </td>

            
                <td class="attributes">
                

                

                
                </td>
            

            

            <td class="description last">
                <p>The WebGLRenderingContext to use.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>shaders</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;WebGLShader></code></span>
|

<span class="param-type"><code>Array.&lt;string></code></span>


            
            </td>

            
                <td class="attributes">
                

                

                
                </td>
            

            

            <td class="description last">
                <p>The shaders to attach, or element ids for their source, or strings that contain their source</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>opt_attribs</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramOptions">module:twgl.ProgramOptions</a></code></span>
|

<span class="param-type"><code>Array.&lt;string></code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.ErrorCallback">module:twgl.ErrorCallback</a></code></span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last">
                <p>Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>opt_locations|module:twgl.ErrorCallback</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last">
                <p>The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>opt_errorCallback</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ErrorCallback">module:twgl.ErrorCallback</a></code></span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last">
                <p>callback for errors. By default it just prints an error to the console<br>
on error. If you want something else pass an callback. It's passed an error message.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>














<div class="section-returns">
<h5>Returns:</h5>

        

<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>WebGLProgram</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>the created program or null if error.</p>
</div>

    
</div>



</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".createProgramFromScripts"><span class="type-signature">(static) </span>createProgramFromScripts<span class="signature">(gl, shaderScriptIds, opt_attribs<span class="signature-attributes">opt</span>, opt_errorCallback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; (nullable) {WebGLProgram}</span></h4>

    



<div class="description">
    <p>Creates a program from 2 script tags.</p>
<p>NOTE: There are 4 signatures for this function</p>
<pre><code>twgl.createProgramFromScripts(gl, [vs, fs], opt_options);
twgl.createProgramFromScripts(gl, [vs, fs], opt_errFunc);
twgl.createProgramFromScripts(gl, [vs, fs], opt_attribs, opt_errFunc);
twgl.createProgramFromScripts(gl, [vs, fs], opt_attribs, opt_locations, opt_errFunc);</code></pre>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            
            </td>

            
                <td class="attributes">
                

                

                
                </td>
            

            

            <td class="description last">
                <p>The WebGLRenderingContext<br>
to use.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>shaderScriptIds</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;string></code></span>


            
            </td>

            
                <td class="attributes">
                

                

                
                </td>
            

            

            <td class="description last">
                <p>Array of ids of the script<br>
tags for the shaders. The first is assumed to be the<br>
vertex shader, the second the fragment shader.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>opt_attribs</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramOptions">module:twgl.ProgramOptions</a></code></span>
|

<span class="param-type"><code>Array.&lt;string></code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.ErrorCallback">module:twgl.ErrorCallback</a></code></span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last">
                <p>Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>opt_locations|module:twgl.ErrorCallback</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last">
                <p>The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>opt_errorCallback</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ErrorCallback">module:twgl.ErrorCallback</a></code></span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last">
                <p>callback for errors. By default it just prints an error to the console<br>
on error. If you want something else pass an callback. It's passed an error message.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>














<div class="section-returns">
<h5>Returns:</h5>

        

<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>WebGLProgram</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>the created program or null if error.</p>
</div>

    
</div>



</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".createProgramFromSources"><span class="type-signature">(static) </span>createProgramFromSources<span class="signature">(gl, shaderSources, opt_attribs<span class="signature-attributes">opt</span>, opt_errorCallback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; (nullable) {WebGLProgram}</span></h4>

    



<div class="description">
    <p>Creates a program from 2 sources.</p>
<p>NOTE: There are 4 signatures for this function</p>
<pre><code>twgl.createProgramFromSource(gl, [vs, fs], opt_options);
twgl.createProgramFromSource(gl, [vs, fs], opt_errFunc);
twgl.createProgramFromSource(gl, [vs, fs], opt_attribs, opt_errFunc);
twgl.createProgramFromSource(gl, [vs, fs], opt_attribs, opt_locations, opt_errFunc);</code></pre>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            
            </td>

            
                <td class="attributes">
                

                

                
                </td>
            

            

            <td class="description last">
                <p>The WebGLRenderingContext<br>
to use.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>shaderSources</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;string></code></span>


            
            </td>

            
                <td class="attributes">
                

                

                
                </td>
            

            

            <td class="description last">
                <p>Array of sources for the<br>
shaders. The first is assumed to be the vertex shader,<br>
the second the fragment shader.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>opt_attribs</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramOptions">module:twgl.ProgramOptions</a></code></span>
|

<span class="param-type"><code>Array.&lt;string></code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.ErrorCallback">module:twgl.ErrorCallback</a></code></span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last">
                <p>Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>opt_locations|module:twgl.ErrorCallback</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last">
                <p>The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>opt_errorCallback</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ErrorCallback">module:twgl.ErrorCallback</a></code></span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last">
                <p>callback for errors. By default it just prints an error to the console<br>
on error. If you want something else pass an callback. It's passed an error message.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>














<div class="section-returns">
<h5>Returns:</h5>

        

<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>WebGLProgram</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>the created program or null if error.</p>
</div>

    
</div>



</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".createProgramInfo"><span class="type-signature">(static) </span>createProgramInfo<span class="signature">(gl, shaderSources, opt_attribs<span class="signature-attributes">opt</span>, opt_errorCallback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; (nullable) {<a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a>}</span></h4>

    



<div class="description">
    <p>Creates a ProgramInfo from 2 sources.</p>
<p>A ProgramInfo contains</p>
<pre><code>programInfo = {
   program: WebGLProgram,
   uniformSetters: object of setters as returned from createUniformSetters,
   attribSetters: object of setters as returned from createAttribSetters,
}
</code></pre>
<p>NOTE: There are 4 signatures for this function</p>
<pre><code>twgl.createProgramInfo(gl, [vs, fs], options);
twgl.createProgramInfo(gl, [vs, fs], opt_errFunc);
twgl.createProgramInfo(gl, [vs, fs], opt_attribs, opt_errFunc);
twgl.createProgramInfo(gl, [vs, fs], opt_attribs, opt_locations, opt_errFunc);</code></pre>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            
            </td>

            
                <td class="attributes">
                

                

                
                </td>
            

            

            <td class="description last">
                <p>The WebGLRenderingContext<br>
to use.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>shaderSources</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;string></code></span>


            
            </td>

            
                <td class="attributes">
                

                

                
                </td>
            

            

            <td class="description last">
                <p>Array of sources for the<br>
shaders or ids. The first is assumed to be the vertex shader,<br>
the second the fragment shader.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>opt_attribs</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramOptions">module:twgl.ProgramOptions</a></code></span>
|

<span class="param-type"><code>Array.&lt;string></code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.ErrorCallback">module:twgl.ErrorCallback</a></code></span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last">
                <p>Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>opt_locations|module:twgl.ErrorCallback</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last">
                <p>The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>opt_errorCallback</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ErrorCallback">module:twgl.ErrorCallback</a></code></span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last">
                <p>callback for errors. By default it just prints an error to the console<br>
on error. If you want something else pass an callback. It's passed an error message.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>














<div class="section-returns">
<h5>Returns:</h5>

        

<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created ProgramInfo or null if it failed to link or compile</p>
</div>

    
</div>



</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".createProgramInfoFromProgram"><span class="type-signature">(static) </span>createProgramInfoFromProgram<span class="signature">(gl, program)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a>}</span></h4>

    



<div class="description">
    <p>Creates a ProgramInfo from an existing program.</p>
<p>A ProgramInfo contains</p>
<pre><code>programInfo = {
   program: WebGLProgram,
   uniformSetters: object of setters as returned from createUniformSetters,
   attribSetters: object of setters as returned from createAttribSetters,
}</code></pre>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>The WebGLRenderingContext<br>
to use.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>program</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLProgram</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>an existing WebGLProgram.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>














<div class="section-returns">
<h5>Returns:</h5>

        

<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created ProgramInfo.</p>
</div>

    
</div>



</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".createUniformBlockInfo"><span class="type-signature">(static) </span>createUniformBlockInfo<span class="signature">(gl, programInfo, blockName)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a>}</span></h4>

    



<div class="description">
    <p>Creates a <code>UniformBlockInfo</code> for the specified block</p>
<p>Note: <strong>If the blockName matches no existing blocks a warning is printed to the console and a dummy<br>
<code>UniformBlockInfo</code> is returned</strong>. This is because when debugging GLSL<br>
it is common to comment out large portions of a shader or for example set<br>
the final output to a constant. When that happens blocks get optimized out.<br>
If this function did not create dummy blocks your code would crash when debugging.</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGL2RenderingContext</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>A WebGL2RenderingContext</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>programInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>a <code>ProgramInfo</code><br>
as returned from <a href="module-twgl.html#.createProgramInfo"><code>module:twgl.createProgramInfo</code></a></p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>blockName</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>string</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>The name of the block.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>














<div class="section-returns">
<h5>Returns:</h5>

        

<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created UniformBlockInfo</p>
</div>

    
</div>



</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".createUniformBlockInfoFromProgram"><span class="type-signature">(static) </span>createUniformBlockInfoFromProgram<span class="signature">(gl, program, blockName)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a>}</span></h4>

    



<div class="description">
    <p>Creates a <code>UniformBlockInfo</code> for the specified block</p>
<p>Note: <strong>If the blockName matches no existing blocks a warning is printed to the console and a dummy<br>
<code>UniformBlockInfo</code> is returned</strong>. This is because when debugging GLSL<br>
it is common to comment out large portions of a shader or for example set<br>
the final output to a constant. When that happens blocks get optimized out.<br>
If this function did not create dummy blocks your code would crash when debugging.</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGL2RenderingContext</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>A WebGL2RenderingContext</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>program</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLProgram</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>A WebGLProgram</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>uniformBlockSpec.</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.UniformBlockSpec">module:twgl.UniformBlockSpec</a></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>A UniformBlockSpec as returned<br>
from <code>module:twgl.createUniformBlockSpecFromProgram</code>.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>blockName</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>string</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>The name of the block.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>














<div class="section-returns">
<h5>Returns:</h5>

        

<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created UniformBlockInfo</p>
</div>

    
</div>



</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".createUniformBlockSpecFromProgram"><span class="type-signature">(static) </span>createUniformBlockSpecFromProgram<span class="signature">(gl, program)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.UniformBlockSpec">module:twgl.UniformBlockSpec</a>}</span></h4>

    



<div class="description">
    <p>Creates a UniformBlockSpec for the given program.</p>
<p>A UniformBlockSpec represents the data needed to create and bind<br>
UniformBlockObjects</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGL2RenderingContext</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>A WebGL2 Rendering Context</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>program</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLProgram</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>A WebGLProgram for a successfully linked program</p>
                
            </td>
        </tr>

    
    </tbody>
</table>














<div class="section-returns">
<h5>Returns:</h5>

        

<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl.html#.UniformBlockSpec">module:twgl.UniformBlockSpec</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created UniformBlockSpec</p>
</div>

    
</div>



</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".createUniformSetters"><span class="type-signature">(static) </span>createUniformSetters<span class="signature">(gl, program)</span><span class="type-signature"> &rarr; {Object.&lt;string, function()>}</span></h4>

    



<div class="description">
    <p>Creates setter functions for all uniforms of a shader<br>
program.</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><a href="module-twgl.html#.setUniforms"><code>module:twgl.setUniforms</code></a></li>
        </ul>
    </dd>
    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>The WebGLRenderingContext to use.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>program</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLProgram</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>the program to create setters for.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>














<div class="section-returns">
<h5>Returns:</h5>

        

<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, function()></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>an object with a setter by name for each uniform</p>
</div>

    
</div>



</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".setAttributes"><span class="type-signature">(static) </span>setAttributes<span class="signature">(setters, buffers)</span><span class="type-signature"></span></h4>

    



<div class="description">
    <p>Sets attributes and binds buffers (deprecated... use <a href="module-twgl.html#.setBuffersAndAttributes"><code>module:twgl.setBuffersAndAttributes</code></a>)</p>
<p>Example:</p>
<pre><code>const program = createProgramFromScripts(
    gl, [&quot;some-vs&quot;, &quot;some-fs&quot;);

const attribSetters = createAttributeSetters(program);

const positionBuffer = gl.createBuffer();
const texcoordBuffer = gl.createBuffer();

const attribs = {
  a_position: {buffer: positionBuffer, numComponents: 3},
  a_texcoord: {buffer: texcoordBuffer, numComponents: 2},
};

gl.useProgram(program);
</code></pre>
<p>This will automatically bind the buffers AND set the<br>
attributes.</p>
<pre><code>setAttributes(attribSetters, attribs);
</code></pre>
<p>Properties of attribs. For each attrib you can add<br>
properties:</p>
<ul>
<li>type: the type of data in the buffer. Default = gl.FLOAT</li>
<li>normalize: whether or not to normalize the data. Default = false</li>
<li>stride: the stride. Default = 0</li>
<li>offset: offset into the buffer. Default = 0</li>
<li>divisor: the divisor for instances. Default = undefined</li>
</ul>
<p>For example if you had 3 value float positions, 2 value<br>
float texcoord and 4 value uint8 colors you'd setup your<br>
attribs like this</p>
<pre><code>const attribs = {
  a_position: {buffer: positionBuffer, numComponents: 3},
  a_texcoord: {buffer: texcoordBuffer, numComponents: 2},
  a_color: {
    buffer: colorBuffer,
    numComponents: 4,
    type: gl.UNSIGNED_BYTE,
    normalize: true,
  },
};</code></pre>
</div>





<dl class="details">

    

    

    

    

    

    

    

    
        <dt class="important tag-deprecated">Deprecated:</dt><dd><ul class="dummy"><li>use <a href="module-twgl.html#.setBuffersAndAttributes"><code>module:twgl.setBuffersAndAttributes</code></a></li></ul></dd>
    

    

    

    

    

    

    

    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>setters</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, function()></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>Attribute setters as returned from createAttributeSetters</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>buffers</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, <a href="module-twgl.html#.AttribInfo">module:twgl.AttribInfo</a>></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>AttribInfos mapped by attribute name.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>
















</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".setBlockUniforms"><span class="type-signature">(static) </span>setBlockUniforms<span class="signature">(uniformBlockInfo, values)</span><span class="type-signature"></span></h4>

    



<div class="description">
    <p>Sets values of a uniform block object</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>uniformBlockInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>A UniformBlockInfo as returned by <a href="module-twgl.html#.createUniformBlockInfo"><code>module:twgl.createUniformBlockInfo</code></a>.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>values</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, ?></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>A uniform name to value map where the value is correct for the given<br>
type of uniform. So for example given a block like</p>
<pre><code>  uniform SomeBlock {
    float someFloat;
    vec2 someVec2;
    vec3 someVec3Array[2];
    int someInt;
  }
</code></pre>
<p>You can set the values of the uniform block with</p>
<pre><code>  twgl.setBlockUniforms(someBlockInfo, {
     someFloat: 12.3,
     someVec2: [1, 2],
     someVec3Array: [1, 2, 3, 4, 5, 6],
     someInt: 5,
  }
</code></pre>
<p>Arrays can be JavaScript arrays or typed arrays</p>
<p>Any name that doesn't match will be ignored</p>
                
            </td>
        </tr>

    
    </tbody>
</table>
















</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".setBuffersAndAttributes"><span class="type-signature">(static) </span>setBuffersAndAttributes<span class="signature">(gl, setters, buffers)</span><span class="type-signature"></span></h4>

    



<div class="description">
    <p>Sets attributes and buffers including the <code>ELEMENT_ARRAY_BUFFER</code> if appropriate</p>
<p>Example:</p>
<pre><code>const programInfo = createProgramInfo(
    gl, [&quot;some-vs&quot;, &quot;some-fs&quot;);

const arrays = {
  position: { numComponents: 3, data: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0], },
  texcoord: { numComponents: 2, data: [0, 0, 0, 1, 1, 0, 1, 1],                 },
};

const bufferInfo = createBufferInfoFromArrays(gl, arrays);

gl.useProgram(programInfo.program);
</code></pre>
<p>This will automatically bind the buffers AND set the<br>
attributes.</p>
<pre><code>setBuffersAndAttributes(gl, programInfo, bufferInfo);
</code></pre>
<p>For the example above it is equivalent to</p>
<pre><code>gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.enableVertexAttribArray(a_positionLocation);
gl.vertexAttribPointer(a_positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
gl.enableVertexAttribArray(a_texcoordLocation);
gl.vertexAttribPointer(a_texcoordLocation, 4, gl.FLOAT, false, 0, 0);</code></pre>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>A WebGLRenderingContext.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>setters</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>
|

<span class="param-type"><code>Object.&lt;string, function()></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>A <code>ProgramInfo</code> as returned from <a href="module-twgl.html#.createProgramInfo"><code>module:twgl.createProgramInfo</code></a> or Attribute setters as returned from <code>module:twgl.createAttributeSetters</code></p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>buffers</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a></code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.VertexArrayInfo">module:twgl.VertexArrayInfo</a></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>a <code>BufferInfo</code> as returned from <a href="module-twgl.html#.createBufferInfoFromArrays"><code>module:twgl.createBufferInfoFromArrays</code></a>.<br>
or a <code>VertexArrayInfo</code> as returned from <code>module:twgl.createVertexArrayInfo</code></p>
                
            </td>
        </tr>

    
    </tbody>
</table>
















</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".setUniformBlock"><span class="type-signature">(static) </span>setUniformBlock<span class="signature">(gl, programInfo, uniformBlockInfo)</span><span class="type-signature"></span></h4>

    



<div class="description">
    <p>Uploads the current uniform values to the corresponding WebGLBuffer<br>
and binds that buffer to the program's corresponding bind point for the uniform block object.</p>
<p>If you haven't changed any values and you only need to bind the uniform block object<br>
call <a href="module-twgl.html#.bindUniformBlock"><code>module:twgl.bindUniformBlock</code></a> instead.</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGL2RenderingContext</code></span>


            
            </td>

            

            

            <td class="description last">
                <p>A WebGL 2 rendering context.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>programInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.UniformBlockSpec">module:twgl.UniformBlockSpec</a></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>a <code>ProgramInfo</code><br>
as returned from <a href="module-twgl.html#.createProgramInfo"><code>module:twgl.createProgramInfo</code></a> or or <code>UniformBlockSpec</code> as<br>
returned from <code>module:twgl.createUniformBlockSpecFromProgram</code>.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>uniformBlockInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>a <code>UniformBlockInfo</code> as returned from<br>
<a href="module-twgl.html#.createUniformBlockInfo"><code>module:twgl.createUniformBlockInfo</code></a>.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>
















</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".setUniforms"><span class="type-signature">(static) </span>setUniforms<span class="signature">(setters, values)</span><span class="type-signature"></span></h4>

    



<div class="description">
    <p>Set uniforms and binds related textures.</p>
<p>example:</p>
<pre><code>const programInfo = createProgramInfo(
    gl, [&quot;some-vs&quot;, &quot;some-fs&quot;]);

const tex1 = gl.createTexture();
const tex2 = gl.createTexture();

... assume we setup the textures with data ...

const uniforms = {
  u_someSampler: tex1,
  u_someOtherSampler: tex2,
  u_someColor: [1,0,0,1],
  u_somePosition: [0,1,1],
  u_someMatrix: [
    1,0,0,0,
    0,1,0,0,
    0,0,1,0,
    0,0,0,0,
  ],
};

gl.useProgram(program);
</code></pre>
<p>This will automatically bind the textures AND set the<br>
uniforms.</p>
<pre><code>twgl.setUniforms(programInfo, uniforms);
</code></pre>
<p>For the example above it is equivalent to</p>
<pre><code>var texUnit = 0;
gl.activeTexture(gl.TEXTURE0 + texUnit);
gl.bindTexture(gl.TEXTURE_2D, tex1);
gl.uniform1i(u_someSamplerLocation, texUnit++);
gl.activeTexture(gl.TEXTURE0 + texUnit);
gl.bindTexture(gl.TEXTURE_2D, tex2);
gl.uniform1i(u_someSamplerLocation, texUnit++);
gl.uniform4fv(u_someColorLocation, [1, 0, 0, 1]);
gl.uniform3fv(u_somePositionLocation, [0, 1, 1]);
gl.uniformMatrix4fv(u_someMatrix, false, [
    1,0,0,0,
    0,1,0,0,
    0,0,1,0,
    0,0,0,0,
  ]);
</code></pre>
<p>Note it is perfectly reasonable to call <code>setUniforms</code> multiple times. For example</p>
<pre><code>const uniforms = {
  u_someSampler: tex1,
  u_someOtherSampler: tex2,
};

const moreUniforms {
  u_someColor: [1,0,0,1],
  u_somePosition: [0,1,1],
  u_someMatrix: [
    1,0,0,0,
    0,1,0,0,
    0,0,1,0,
    0,0,0,0,
  ],
};

twgl.setUniforms(programInfo, uniforms);
twgl.setUniforms(programInfo, moreUniforms);
</code></pre>
<p>You can also add WebGLSamplers to uniform samplers as in</p>
<pre><code>const uniforms = {
  u_someSampler: {
    texture: someWebGLTexture,
    sampler: someWebGLSampler,
  },
};
</code></pre>
<p>In which case both the sampler and texture will be bound to the<br>
same unit.</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>setters</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>
|

<span class="param-type"><code>Object.&lt;string, function()></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>a <code>ProgramInfo</code> as returned from <code>createProgramInfo</code> or the setters returned from<br>
<code>createUniformSetters</code>.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>values</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, ?></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>an object with values for the<br>
uniforms.<br>
You can pass multiple objects by putting them in an array or by calling with more arguments.For example</p>
<pre><code>const sharedUniforms = {
  u_fogNear: 10,
  u_projection: ...
  ...
};

const localUniforms = {
  u_world: ...
  u_diffuseColor: ...
};

twgl.setUniforms(programInfo, sharedUniforms, localUniforms);

// is the same as

twgl.setUniforms(programInfo, [sharedUniforms, localUniforms]);

// is the same as

twgl.setUniforms(programInfo, sharedUniforms);
twgl.setUniforms(programInfo, localUniforms};</code></pre>
                
            </td>
        </tr>

    
    </tbody>
</table>
















</div>
        
            
<div class="section-method">

    

    <h4 class="name" id=".setUniformsAndBindTextures"><span class="type-signature">(static) </span>setUniformsAndBindTextures<span class="signature">(setters, values)</span><span class="type-signature"></span></h4>

    



<div class="description">
    <p>Alias for <code>setUniforms</code></p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>setters</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>
|

<span class="param-type"><code>Object.&lt;string, function()></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>a <code>ProgramInfo</code> as returned from <code>createProgramInfo</code> or the setters returned from<br>
<code>createUniformSetters</code>.</p>
                
            </td>
        </tr>

    

        <tr>
            
                <td class="name"><code>values</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, ?></code></span>


            
            </td>

            

            

            <td class="description last">
                <p>an object with values for the</p>
                
            </td>
        </tr>

    
    </tbody>
</table>
















</div>
        
            
<div class="section-method">

    

    <h4 class="name" id="~getBindPointForSamplerType"><span class="type-signature">(inner) </span>getBindPointForSamplerType<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    <p>Returns the corresponding bind point for a given sampler type</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>























</div>
        
    

    

    
</article>

</section>




</div>

<br class="clear">

<script src="scripts/prep.js"></script>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>